import { Form, Row, Col, Input } from 'antd'
import '../styles/EditContent.scss'
import { useEffect } from 'react'

const EditContent = ({ initialValues, setForm }) => {
  const [form] = Form.useForm()
  
  // 初始化数据
  useEffect(() => {
    form.setFieldsValue(initialValues)
  }, [initialValues])

  return (
    <div className="dataset-edit-content">
      <Form form={form}
      onValuesChange={(_, values) => {
        setForm(form => {
          return { ...form, ...values }
        });
      }}>
        <Row gutter={100}>
          <Col span={8}>
            <Form.Item label="数据集名称" name="name">
              <Input placeholder="请输入项目名称" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="备注" name="remark">
              <Input placeholder="请输入项目名称" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="创建时间" name="created_on">
              <Input readOnly />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default EditContent
